<template>
	<view>
		<u-navbar :border-bottom="false">
		</u-navbar>
		<view class="u-flex u-row-between u-m-x-30 u-p-b-20 lurk">
			<text class="u-font-50">群公告</text>
			<view class="u-p-x-30 u-p-y-10" v-if="userId==info.userId"><text class="u-font-32">编辑</text></view>
		</view>
		<view class="head" :style="{top:`${navBar}px`}">
			<view class="u-flex u-row-between u-m-x-30 u-p-b-20">
				<text class="u-font-50 text-bold">群公告</text>
				<view class="u-flex" v-if="userId==info.userId">
					<view class="u-p-x-30 u-p-y-10 radius bg-blue u-m-l-20" @tap="edit">
						<text class="u-font-32">编辑</text>
						<text class="u-font-32 iconfont icon-pen u-m-l-10"></text>
					</view>
					<view class="u-p-x-30 u-p-y-10 radius bg-red u-m-l-20" @tap="remove">
						<text class="u-font-32">删除</text>
						<text class="u-font-32 iconfont icon-remove u-m-l-10"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-x-30 u-border-bottom u-p-y-20">
			<text class="text-gray u-font-32">{{info.createDate}}</text>
		</view>
		<view class="u-m-x-30 u-p-30">
			<text class="u-font-32">{{info.noticeContent}}</text>
		</view>
		<u-modal 
			v-model="ask.show" 
			:content="ask.content"
			show-cancel-button
			@confirm="resolve"
			@cancel="reject" 
		/>
	</view>
</template>

<script>
	
	import { fetchNoticeDetail, removeNotice } from "@/api/group.js";
	import {event} from "../bus.js"
	import {mapGetters} from "vuex"
	import { delay, goback, jumpTo, toast } from "@/utils/util.js";
	export default {
		data() {
			return {
				id:'',
				info:{}, 
				ask:{
					show:false,
					content:'',
				},
				bridge:null,
				lock:false
			};
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		onLoad({id}) {
			this.id = id
			this.initInfo().catch((e)=>{
				toast(e.message||e.retDesc)
				delay(1000).then(()=>{
					goback()
				})
			})
			event.$on('notice_changed',this.initInfo)
		},
		onUnload() {
			event.$on('notice_changed',this.initInfo)
		},
		methods:{
			async initInfo(){
				this.info = await fetchNoticeDetail(this.id)
				if(!this.info){
					throw new Error('该公告已删除')
				}
			},
			edit(){
				jumpTo(`/pages/group/notice/publish?id=${this.id}&gid=${this.info.groupId}`)
			},
			async remove(){
				if(this.lock){
					throw new Error('正在请求中')
				}
				await new Promise((resolve,reject)=>{
					this.bridge = {
						resolve,
						reject
					}
					this.ask.content = '确认删除公告吗?'
					this.ask.show = true
				})
				try{
					this.lock = true
					await removeNotice(this.id)
					event.$emit('notice_removed',this.id)
					toast('删除成功')
					await delay(1000)
					goback()
				}finally{
					this.lock = false
				}
			},
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.lurk{
		opacity: 0;
	}
	.head{
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #FFFFFF;
	}
</style>
